<template>
	<view class="count">
		<view class="top">
			<u-tabs :list="list" :is-scroll="false" active-color="#009D85" :current="current" @change="change"></u-tabs>
		</view>
		<view class="div">

		</view>
		<view class="body p-l-20 p-r-20">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="oneOnreachBottom">
				<view v-for="(item,index) in lists" :key="index" class="item">
					<view v-if="current==0" @click="timeMiao(item)" class="b-r-20 b-f b-f m-b-20 p-20">
						<view class="tops f f-a-c f-j-b">
							<view class="lef">
								{{item.activity.name}}
							</view>
							<view class="rig">
								{{item.status==1?'活动参与中':item.status==2?'参与失败':item.status==3?'待核销':'已核销'}}
							</view>
						</view>
						<view class="center">
							活动时间段：{{item.activity.start_at}}~{{item.activity.end_at}}
						</view>
						<view class="bot">
							门店名称：{{item.shop.name}}
						</view>
					</view>
					<view @click="tuanGou(item)" class="b-r-20 b-f b-f m-b-20 p-20" v-else>
						<view class="tops f f-a-c f-j-b">
							<view class="lef">
								{{item.activity.name}}
							</view>
							<view class="rig">
								{{item.status==1?'活动参与中':item.status==2?'参与失败':item.status==3?'待核销':'已核销'}}
							</view>
						</view>
						<view class="center">
							活动时间段：{{item.activity.start_at}}~{{item.activity.end_at}}
						</view>
						<view class="bot">
							当前参与人数：{{item.activity.detail.joined_number_num}}人
						</view>
						<view class="center">
							需要人数：{{item.activity.detail.num}}人
						</view>
						<view class="center">
							门店名称：{{item.shop.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],
				current: 0,
				list: [{
					name: '秒杀'
				}, {
					name: '团购'
				}],
				page: 1
			}
		},
		watch: {
			current(newV, oldV) {
				this.page = 1
				this.lists = []
				this.initList()
			}
		},
		onShow() {
			this.lists = []
			this.page = 1
			this.initList()
		},
		methods: {
			async initList() {
				let n = await this.$api.Activities({
					page: this.page,
					type: this.current + 1
				})
				this.lists = [...this.lists, ...n.data.data]
			},
			// 这个是跳转秒杀
			timeMiao(item) {
				// console.log(item, '111111111111111');
				// return
				uni.setStorageSync('code', item.offset_qrcode_content)
				if (item.status == 2 || item.status == 4) {
					return
				}
				uni.navigateTo({
					url: '/pageB/CheckOffCode'
				})
			},
			// 跳转团购
			tuanGou(item) {
				uni.setStorageSync('code', item.offset_qrcode_content)
				if (item.status == 2 || item.status == 4) {
					return
				}
				uni.navigateTo({
					url: '/pageB/CheckOffCode'
				})
			},
			oneOnreachBottom() {
				this.page++
				console.log('123456');
				this.initList()
			},
			// 这个是tab切换
			change(e) {
				this.current = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #999999;
		margin: 15rpx 0;
	}

	.bot {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #999999;
	}

	.lef {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #333333;
	}

	.rig {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
	}

	.body {
		height: calc(100vh - 110rpx);
	}

	.div {
		height: 30rpx;
		width: 100%;
	}

	.top {
		height: 80rpx;
		width: 100%;
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
	}
</style>